<template>
	<view class="container" :style="{ paddingTop: statusBarHeight + 'px' }">
		<!-- 背景装饰元素 -->
		<view class="background-elements">
			<view class="bg-circle bg-circle-1"></view>
			<view class="bg-circle bg-circle-2"></view>
			<view class="bg-circle bg-circle-3"></view>
		</view>
		
		<!-- 用户信息卡片 -->
	<!-- 	<view class="profile-card">
			<view class="profile-bg"></view>
			<view class="profile-content">
				<view class="avatar-wrapper">
					<image class="avatar" :src="avatarUrl" mode="aspectFit" />
					<view class="avatar-status"></view>
					<view class="avatar-glow"></view>
				</view>
				<view class="user-info">
					<view class="name">{{ displayName }}</view>
					<view class="work-id">
						<text class="work-icon">👤</text>
						<text class="work-text">工号：{{ workId }}</text>
					</view>
					<view class="user-tags">
						<view class="tag">员工</view>
						<view class="tag">杨涛</view>
					</view>
				</view>
			</view>
		</view> -->
		<!-- 用户信息卡片 -->
		<view class="profile-card">
			<view class="profile-bg"></view>
			<view class="profile-header">
				<view class="header-left">
					<view class="avatar-wrapper">
						<image class="avatar" :src="avatarUrl" mode="aspectFit" />
						<view class="avatar-status"></view>
						<view class="avatar-glow"></view>
						<view class="avatar-edit" @tap="onEditAvatar">
							<text class="edit-icon">✎</text>
						</view>
					</view>
					<view class="user-basic-info">
						<view class="name-section">
							<view class="name">{{ displayName }}</view>
							<view class="level-badge">VIP</view>
						</view>
						<view class="work-id">
							<text class="work-icon">👤</text>
							<text class="work-text">工号：{{ workId }}</text>
						</view>
						<view class="department">
							<text class="dept-icon">🏢</text>
							<text class="dept-text">产品部 · 全栈工程师</text>
						</view>
					</view>
				</view>
				<view class="header-right">
					<view class="edit-profile" @tap="onEditProfile">
						<text class="edit-text">编辑资料</text>
						<text class="edit-arrow">›</text>
					</view>
				</view>
			</view>
			
			<view class="profile-stats">
				<view class="stat-item">
					<view class="stat-value">28</view>
					<view class="stat-label">项目数</view>
				</view>
				<view class="stat-divider"></view>
				<view class="stat-item">
					<view class="stat-value">156</view>
					<view class="stat-label">工作时长</view>
				</view>
				<view class="stat-divider"></view>
				<view class="stat-item">
					<view class="stat-value">98%</view>
					<view class="stat-label">完成率</view>
				</view>
			</view>
			
			<view class="user-tags-section">
				<view class="tags-title">个人标签</view>
				<view class="user-tags">
					<view class="tag tag-primary">电气工程师</view>
					<view class="tag tag-secondary">软件工程师</view>
					<view class="tag tag-success">产品部</view>
					<view class="tag tag-warning">杨涛</view>
					<!-- <view class="tag tag-primary">技术骨干</view>
					<view class="tag tag-secondary">5年经验</view>
					<view class="tag tag-success">优秀员工</view>
					<view class="tag tag-warning">杨涛</view> -->
				</view>
			</view>
			
			<view class="quick-actions">
				<view class="action-item" @tap="onQuickAction('message')">
					<view class="action-icon">💬</view>
					<view class="action-text">消息</view>
				</view>
				<view class="action-item" @tap="onQuickAction('schedule')">
					<view class="action-icon">📅</view>
					<view class="action-text">日程</view>
				</view>
				<view class="action-item" @tap="onQuickAction('achievement')">
					<view class="action-icon">🏆</view>
					<view class="action-text">成就</view>
				</view>
				<view class="action-item" @tap="onQuickAction('settings')">
					<view class="action-icon">⚙️</view>
					<view class="action-text">设置</view>
				</view>
			</view>
		</view>
		
		<!-- 系统信息 -->
		<view class="menu-section">
			<view class="section-title">
				<text class="title-text">系统信息</text>
				<view class="title-line"></view>
			</view>
			
			<view class="menu-card">
				<view class="menu-item" @tap="onMenuItemTap('profile')">
					<view class="menu-item-left">
						<view class="menu-icon-wrapper">
							<text class="menu-icon">👤</text>
						</view>
						<text class="menu-label">个人资料</text>
					</view>
					<view class="menu-arrow">›</view>
				</view>
				
				<view class="menu-divider"></view>
				
				<view class="menu-item">
					<view class="menu-item-left">
						<view class="menu-icon-wrapper">
							<text class="menu-icon">📱</text>
						</view>
						<text class="menu-label">应用版本</text>
					</view>
					<text class="menu-value">v{{ appVersion }}</text>
				</view>
				
		<!-- 		<view class="menu-divider"></view>
				
				<view class="menu-item">
					<view class="menu-item-left">
						<view class="menu-icon-wrapper">
							<text class="menu-icon">🌐</text>
						</view>
						<text class="menu-label">运行环境</text>
					</view>
					<text class="menu-value">{{ environment }}</text>
				</view> -->
				
				<view class="menu-divider"></view>
				
				<view class="menu-item" @tap="onMenuItemTap('about')">
					<view class="menu-item-left">
						<view class="menu-icon-wrapper">
							<text class="menu-icon">ℹ️</text>
						</view>
						<text class="menu-label">关于我们</text>
					</view>
					<view class="menu-arrow">›</view>
				</view>
			</view>
		</view>
		
		<!-- 退出登录 -->
		<view class="logout-wrapper">
			<button class="logout-btn" @tap="onLogout">
				<view class="logout-btn-content">
					<text class="logout-icon">🚪</text>
					<text class="logout-text">退出登录</text>
				</view>
				<view class="logout-btn-wave"></view>
			</button>
		</view>
	</view>
</template>

<script>
import { getUser, clearAuth, isAuthed } from '@/utils/auth.js'

export default {
	data() {
		return {
			user: null,
			appVersion: '1.0.0',
			environment: '开发环境',
			statusBarHeight: 0
		}
	},
	computed: {
		displayName() {
			const u = this.user || {};
			return u.realName || u.username || '未登录用户';
		},
		workId() {
			const u = this.user || {};
			return u.username || '---';
		},
		avatarUrl() {
			const u = this.user || {};
			// 如果有头像URL则使用，否则生成基于姓名的默认头像
			if (u.avatar) return u.avatar;
			const name = this.displayName.charAt(0);
			return `https://dummyimage.com/200x200/007AFF/ffffff&text=${name}`;
		}
	},
	onShow() {
		if (!isAuthed()) {
			uni.redirectTo({ url: '/pages/login/login' });
			return;
		}
		this.user = getUser();
	},
	onLoad() {
		// 获取状态栏高度
		const systemInfo = uni.getSystemInfoSync();
		this.statusBarHeight = systemInfo.statusBarHeight || 0;
		
		// 获取应用版本信息
		this.getAppInfo();
	},
	methods: {
		getAppInfo() {
			// 这里可以调用API获取实际的应用版本信息
			// 暂时使用模拟数据
			this.appVersion = '1.0.0';
			this.environment = '开发环境';
		},
		
		onMenuItemTap(type) {
			switch(type) {
				case 'profile':
					uni.showToast({ title: '个人资料功能开发中', icon: 'none' });
					break;
				case 'about':
					uni.showToast({ title: '关于我们功能开发中', icon: 'none' });
					break;
			}
		},
		
		onLogout() {
			uni.showModal({
				title: '确认退出',
				content: '确定要退出登录吗？',
				confirmColor: '#ff4d4f',
				confirmText: '退出',
				cancelText: '取消',
				success: (res) => {
					if (res.confirm) {
						// 添加退出动画效果
						this.showLogoutAnimation();
						setTimeout(() => {
							clearAuth();
							uni.reLaunch({ url: '/pages/login/login' });
						}, 800);
					}
				}
			});
		},
		
		onEditAvatar() {
				uni.showToast({ title: '更换头像功能开发中', icon: 'none' });
			},
			
			onEditProfile() {
				uni.showToast({ title: '编辑资料功能开发中', icon: 'none' });
			},
			
			onQuickAction(type) {
				const actions = {
					message: '消息中心',
					schedule: '日程安排',
					achievement: '成就系统',
					settings: '个人设置'
				};
				uni.showToast({ title: `${actions[type]}功能开发中`, icon: 'none' });
			},
		
		
		showLogoutAnimation() {
			// 这里可以添加退出动画效果
			uni.showToast({
				title: '退出登录中...',
				icon: 'loading',
				mask: true,
				duration: 800
			});
		}
	}
}
</script>

<style>
.container {
	height: 100vh;
	background: linear-gradient(135deg, #f5f7fa 0%, #e8edf3 100%);
	padding: 20rpx 24rpx 40rpx;
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	box-sizing: border-box;
}

/* 背景装饰元素 */
.background-elements {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	overflow: hidden;
	z-index: 0;
}

.bg-circle {
	position: absolute;
	border-radius: 50%;
	background: linear-gradient(135deg, rgba(102, 126, 234, 0.1) 0%, rgba(118, 75, 162, 0.1) 100%);
	animation: float 6s ease-in-out infinite;
}

.bg-circle-1 {
	width: 200rpx;
	height: 200rpx;
	top: 10%;
	right: -50rpx;
	animation-delay: 0s;
}

.bg-circle-2 {
	width: 150rpx;
	height: 150rpx;
	bottom: 30%;
	left: -40rpx;
	animation-delay: 2s;
}

.bg-circle-3 {
	width: 100rpx;
	height: 100rpx;
	top: 50%;
	right: 20%;
	animation-delay: 4s;
}

@keyframes float {
	0%, 100% {
		transform: translateY(0) scale(1);
	}
	50% {
		transform: translateY(-20rpx) scale(1.05);
	}
}

/* 用户信息卡片 */
.profile-card {
	background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
	border-radius: 32rpx;
	padding: 50rpx 30rpx 30rpx;
	margin-bottom: 30rpx;
	box-shadow: 0 20rpx 40rpx rgba(102, 126, 234, 0.3);
	position: relative;
	overflow: hidden;
	z-index: 1;
	flex-shrink: 0;
}

.profile-bg {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="grid" width="10" height="10" patternUnits="userSpaceOnUse"><path d="M 10 0 L 0 0 0 10" fill="none" stroke="rgba(255,255,255,0.1)" stroke-width="1"/></pattern></defs><rect width="100" height="100" fill="url(%23grid)"/></svg>');
	opacity: 0.5;
}

.profile-content {
	display: flex;
	align-items: center;
	position: relative;
	z-index: 2;
}

.avatar-wrapper {
	position: relative;
	margin-right: 30rpx;
}

.avatar {
	width: 120rpx;
	height: 120rpx;
	border-radius: 50%;
	border: 4rpx solid rgba(255, 255, 255, 0.8);
	box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.2);
	background: linear-gradient(135deg, #007AFF 0%, #0051D5 100%);
}

.avatar-status {
	position: absolute;
	bottom: 8rpx;
	right: 8rpx;
	width: 20rpx;
	height: 20rpx;
	border-radius: 50%;
	background: #52c41a;
	border: 2rpx solid #fff;
	z-index: 3;
}

.avatar-glow {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 140rpx;
	height: 140rpx;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.2);
	filter: blur(15rpx);
	z-index: 1;
	animation: glow 3s ease-in-out infinite alternate;
}

@keyframes glow {
	0% {
		opacity: 0.3;
		transform: translate(-50%, -50%) scale(1);
	}
	100% {
		opacity: 0.6;
		transform: translate(-50%, -50%) scale(1.1);
	}
}

.user-info {
	flex: 1;
}

.name {
	font-size: 36rpx;
	font-weight: 700;
	color: #fff;
	margin-bottom: 10rpx;
	text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.1);
}

.work-id {
	display: flex;
	align-items: center;
	margin-bottom: 16rpx;
}

.work-icon {
	font-size: 26rpx;
	margin-right: 8rpx;
	opacity: 0.9;
}

.work-text {
	font-size: 26rpx;
	color: rgba(255, 255, 255, 0.9);
}

.user-tags {
	display: flex;
	gap: 12rpx;
}

.tag {
	padding: 6rpx 16rpx;
	background: rgba(255, 255, 255, 0.2);
	border-radius: 16rpx;
	font-size: 20rpx;
	color: #fff;
	backdrop-filter: blur(10rpx);
	border: 1rpx solid rgba(255, 255, 255, 0.3);
}

/* 菜单区域 */
.menu-section {
	margin-bottom: 20rpx;
	position: relative;
	z-index: 1;
	flex: 1;
	display: flex;
	flex-direction: column;
	min-height: 0;
}

.section-title {
	display: flex;
	align-items: center;
	margin-bottom: 20rpx;
	padding-left: 20rpx;
	flex-shrink: 0;
}

.title-text {
	font-size: 30rpx;
	font-weight: 600;
	color: #333;
	margin-right: 20rpx;
}

.title-line {
	flex: 1;
	height: 2rpx;
	background: linear-gradient(90deg, #667eea, transparent);
}

.menu-card {
	background: #ffffff;
	border-radius: 24rpx;
	padding: 0 30rpx;
	box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.08);
	overflow: hidden;
	flex: 1;
	display: flex;
	flex-direction: column;
	min-height: 0;
}

.menu-item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 28rpx 0;
	transition: all 0.3s;
	flex-shrink: 0;
}

.menu-item:active {
	background-color: rgba(0, 0, 0, 0.02);
	transform: translateX(4rpx);
}

.menu-item-left {
	display: flex;
	align-items: center;
	flex: 1;
}

/* 统一图标样式 */
.menu-icon-wrapper {
	width: 70rpx;
	height: 70rpx;
	border-radius: 18rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-right: 20rpx;
	background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
	box-shadow: 0 4rpx 16rpx rgba(102, 126, 234, 0.2);
	transition: all 0.3s;
}

.menu-item:active .menu-icon-wrapper {
	transform: scale(1.1);
	box-shadow: 0 6rpx 20rpx rgba(102, 126, 234, 0.3);
}

.menu-icon {
	font-size: 32rpx;
	color: #fff;
}

.menu-label {
	font-size: 28rpx;
	color: #333;
	font-weight: 500;
}

.menu-value {
	font-size: 26rpx;
	color: #666;
	font-weight: 500;
}

.menu-arrow {
	font-size: 32rpx;
	color: #ccc;
	font-weight: bold;
	transition: transform 0.3s;
}

.menu-item:active .menu-arrow {
	transform: translateX(8rpx);
	color: #667eea;
}

.menu-divider {
	height: 1rpx;
	background: linear-gradient(90deg, transparent, #f0f0f0, transparent);
	margin: 0 -30rpx;
	flex-shrink: 0;
}

/* 退出登录按钮 */
.logout-wrapper {
	padding: 0 4rpx;
	position: relative;
	z-index: 1;
	margin-top: auto;
	flex-shrink: 0;
}

.logout-btn {
	width: 100%;
	height: 90rpx;
	background: linear-gradient(135deg, #ff4d4f 0%, #ff7875 100%);
	border-radius: 45rpx;
	border: none;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 8rpx 24rpx rgba(255, 77, 79, 0.4);
	transition: all 0.3s;
	font-size: 30rpx;
	font-weight: 600;
	color: #fff;
	position: relative;
	overflow: hidden;
}

.logout-btn:active {
	transform: translateY(2rpx);
	box-shadow: 0 4rpx 16rpx rgba(255, 77, 79, 0.3);
}

.logout-btn-content {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 12rpx;
	position: relative;
	z-index: 2;
}

.logout-icon {
	font-size: 32rpx;
	transition: transform 0.3s;
}

.logout-btn:active .logout-icon {
	transform: translateX(-4rpx);
}

.logout-text {
	font-size: 30rpx;
	font-weight: 600;
}

.logout-btn-wave {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
	transform: translateX(-100%);
	transition: transform 0.6s;
}

.logout-btn:active .logout-btn-wave {
	transform: translateX(100%);
}

/* 用户信息卡片 */
.profile-card {
	background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
	border-radius: 32rpx;
	padding: 40rpx 30rpx 30rpx;
	margin-bottom: 30rpx;
	box-shadow: 0 20rpx 40rpx rgba(102, 126, 234, 0.3);
	position: relative;
	overflow: hidden;
	z-index: 1;
	flex-shrink: 0;
}

.profile-bg {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="grid" width="10" height="10" patternUnits="userSpaceOnUse"><path d="M 10 0 L 0 0 0 10" fill="none" stroke="rgba(255,255,255,0.1)" stroke-width="1"/></pattern></defs><rect width="100" height="100" fill="url(%23grid)"/></svg>');
	opacity: 0.5;
}

/* 头部信息 */
.profile-header {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	margin-bottom: 30rpx;
}

.header-left {
	display: flex;
	align-items: flex-start;
	flex: 1;
}

.avatar-wrapper {
	position: relative;
	margin-right: 24rpx;
}

.avatar {
	width: 120rpx;
	height: 120rpx;
	border-radius: 50%;
	border: 4rpx solid rgba(255, 255, 255, 0.9);
	box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.2);
	background: linear-gradient(135deg, #007AFF 0%, #0051D5 100%);
}

.avatar-status {
	position: absolute;
	bottom: 8rpx;
	right: 8rpx;
	width: 20rpx;
	height: 20rpx;
	border-radius: 50%;
	background: #52c41a;
	border: 2rpx solid #fff;
	z-index: 3;
}

.avatar-glow {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 140rpx;
	height: 140rpx;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.2);
	filter: blur(15rpx);
	z-index: 1;
	animation: glow 3s ease-in-out infinite alternate;
}

.avatar-edit {
	position: absolute;
	bottom: -4rpx;
	right: -4rpx;
	width: 36rpx;
	height: 36rpx;
	border-radius: 50%;
	background: linear-gradient(135deg, #ff6b6b 0%, #ee5a52 100%);
	display: flex;
	align-items: center;
	justify-content: center;
	border: 2rpx solid #fff;
	box-shadow: 0 4rpx 12rpx rgba(255, 107, 107, 0.4);
	z-index: 4;
}

.edit-icon {
	font-size: 16rpx;
	color: #fff;
	font-weight: bold;
}

.user-basic-info {
	flex: 1;
}

.name-section {
	display: flex;
	align-items: center;
	margin-bottom: 12rpx;
}

.name {
	font-size: 36rpx;
	font-weight: 700;
	color: #fff;
	margin-right: 16rpx;
	text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.1);
}

.level-badge {
	padding: 4rpx 12rpx;
	background: linear-gradient(135deg, #ffd700 0%, #ffa500 100%);
	border-radius: 12rpx;
	font-size: 20rpx;
	color: #fff;
	font-weight: 600;
}

.work-id, .department {
	display: flex;
	align-items: center;
	margin-bottom: 8rpx;
}

.work-icon, .dept-icon {
	font-size: 24rpx;
	margin-right: 8rpx;
	opacity: 0.9;
}

.work-text, .dept-text {
	font-size: 26rpx;
	color: rgba(255, 255, 255, 0.9);
}

.header-right {
	display: flex;
	align-items: flex-start;
}

.edit-profile {
	display: flex;
	align-items: center;
	padding: 12rpx 20rpx;
	background: rgba(255, 255, 255, 0.2);
	border-radius: 20rpx;
	backdrop-filter: blur(10rpx);
	border: 1rpx solid rgba(255, 255, 255, 0.3);
	transition: all 0.3s;
}

.edit-profile:active {
	background: rgba(255, 255, 255, 0.3);
	transform: scale(0.95);
}

.edit-text {
	font-size: 24rpx;
	color: #fff;
	margin-right: 8rpx;
}

.edit-arrow {
	font-size: 24rpx;
	color: #fff;
	font-weight: bold;
}

/* 统计数据 */
.profile-stats {
	display: flex;
	align-items: center;
	background: rgba(255, 255, 255, 0.15);
	border-radius: 20rpx;
	padding: 24rpx;
	margin-bottom: 24rpx;
	backdrop-filter: blur(10rpx);
	border: 1rpx solid rgba(255, 255, 255, 0.2);
}

.stat-item {
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
}

.stat-value {
	font-size: 32rpx;
	font-weight: 700;
	color: #fff;
	margin-bottom: 4rpx;
}

.stat-label {
	font-size: 22rpx;
	color: rgba(255, 255, 255, 0.8);
}

.stat-divider {
	width: 1rpx;
	height: 40rpx;
	background: rgba(255, 255, 255, 0.3);
}

/* 标签区域 */
.user-tags-section {
	margin-bottom: 24rpx;
}

.tags-title {
	font-size: 26rpx;
	color: rgba(255, 255, 255, 0.9);
	margin-bottom: 16rpx;
	font-weight: 600;
}

.user-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 12rpx;
}

.tag {
	padding: 8rpx 20rpx;
	border-radius: 20rpx;
	font-size: 22rpx;
	color: #fff;
	font-weight: 500;
	backdrop-filter: blur(10rpx);
	border: 1rpx solid rgba(255, 255, 255, 0.3);
}

.tag-primary {
	background: rgba(74, 144, 226, 0.6);
}

.tag-secondary {
	background: rgba(146, 84, 222, 0.6);
}

.tag-success {
	background: rgba(39, 174, 96, 0.6);
}

.tag-warning {
	background: rgba(243, 156, 18, 0.6);
}

/* 快捷操作 */
.quick-actions {
	display: flex;
	justify-content: space-around;
	background: rgba(255, 255, 255, 0.1);
	border-radius: 20rpx;
	padding: 20rpx;
	backdrop-filter: blur(10rpx);
	border: 1rpx solid rgba(255, 255, 255, 0.2);
}

.action-item {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 12rpx;
	transition: all 0.3s;
	border-radius: 16rpx;
}

.action-item:active {
	background: rgba(255, 255, 255, 0.2);
	transform: scale(0.95);
}

.action-icon {
	font-size: 36rpx;
	margin-bottom: 8rpx;
}

.action-text {
	font-size: 22rpx;
	color: rgba(255, 255, 255, 0.9);
}

@keyframes glow {
	0% {
		opacity: 0.3;
		transform: translate(-50%, -50%) scale(1);
	}
	100% {
		opacity: 0.6;
		transform: translate(-50%, -50%) scale(1.1);
	}
}
</style>